<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="ios-top-nav">
			<view class="status-bar"></view>
			<view class="nav-content">
				<view class="back-btn" @tap="goBack">
					<image src="/static/icons/back.png" mode="aspectFit"></image>
				</view>
				<view class="nav-actions">
					<view class="action-btn share" @tap="showShare">
						<image src="/static/icons/share.png" mode="aspectFit"></image>
					</view>
					<view class="action-btn more" @tap="showMore">
						<image src="/static/icons/more.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<scroll-view scroll-y class="main-content" :show-scrollbar="false">
			<!-- 图片展示区 -->
			<swiper class="image-swiper" :indicator-dots="true" :autoplay="false" circular>
				<swiper-item v-for="(image, index) in content.images" :key="index">
					<image :src="image" mode="aspectFill" class="content-image"></image>
				</swiper-item>
			</swiper>
			
			<!-- 内容信息区 -->
			<view class="content-section">
				<!-- 用户信息 -->
				<view class="user-info">
					<image :src="content.userAvatar" mode="aspectFill" class="user-avatar"></image>
					<view class="user-details">
						<text class="user-name">{{content.userName}}</text>
						<text class="post-time">{{content.postTime}}</text>
					</view>
					<view class="follow-btn" :class="{ following: content.isFollowing }" @tap="toggleFollow">
						<text>{{content.isFollowing ? '已关注' : '关注'}}</text>
					</view>
				</view>
				
				<!-- 内容描述 -->
				<view class="content-description">
					<text class="description-text">{{content.description}}</text>
					<view class="tags" v-if="content.tags && content.tags.length">
						<text v-for="(tag, index) in content.tags" :key="index" class="tag">#{{tag}}</text>
					</view>
				</view>
				
				<!-- 互动数据 -->
				<view class="interaction-stats">
					<view class="stat-item" @tap="showLikes">
						<image src="/static/icons/like.png" mode="aspectFit"></image>
						<text>{{content.likes}}</text>
					</view>
					<view class="stat-item" @tap="showComments">
						<image src="/static/icons/comment.png" mode="aspectFit"></image>
						<text>{{content.comments}}</text>
					</view>
					<view class="stat-item" @tap="showShares">
						<image src="/static/icons/share.png" mode="aspectFit"></image>
						<text>{{content.shares}}</text>
					</view>
				</view>
				
				<!-- 评论列表 -->
				<view class="comments-section">
					<view class="section-title">评论 {{content.comments}}</view>
					<view class="comment-list">
						<view class="comment-item" v-for="(comment, index) in content.commentList" :key="index">
							<image :src="comment.userAvatar" mode="aspectFill" class="comment-avatar"></image>
							<view class="comment-content">
								<view class="comment-header">
									<text class="comment-name">{{comment.userName}}</text>
									<text class="comment-time">{{comment.time}}</text>
								</view>
								<text class="comment-text">{{comment.content}}</text>
								<view class="comment-actions">
									<view class="action-btn" @tap="likeComment(comment)">
										<image src="/static/icons/like.png" mode="aspectFit"></image>
										<text>{{comment.likes}}</text>
									</view>
									<view class="action-btn" @tap="replyComment(comment)">
										<image src="/static/icons/reply.png" mode="aspectFit"></image>
										<text>回复</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="input-box">
				<image src="/static/icons/emoji.png" mode="aspectFit" class="emoji-btn"></image>
				<input 
					type="text" 
					v-model="commentText"
					placeholder="说点什么..."
					@confirm="submitComment"
					class="comment-input"
				/>
				<view class="send-btn" :class="{ active: commentText.trim() }" @tap="submitComment">
					<text>发送</text>
				</view>
			</view>
			<view class="action-buttons">
				<view class="action-btn" :class="{ active: content.isLiked }" @tap="toggleLike">
					<image src="/static/icons/like.png" mode="aspectFit"></image>
					<text>{{content.likes}}</text>
				</view>
				<view class="action-btn" @tap="focusComment">
					<image src="/static/icons/comment.png" mode="aspectFit"></image>
					<text>{{content.comments}}</text>
				</view>
				<view class="action-btn" @tap="showShare">
					<image src="/static/icons/share.png" mode="aspectFit"></image>
					<text>{{content.shares}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			commentText: '',
			content: {
				id: 1,
				images: [
					'/static/content/math-notes.jpg',
					'/static/content/math-notes-2.jpg',
					'/static/content/math-notes-3.jpg'
				],
				userName: '数学达人',
				userAvatar: '/static/avatars/user1.png',
				postTime: '2小时前',
				isFollowing: false,
				description: '今天给大家分享一些高等数学的学习笔记，包括极限、导数、积分等重要概念的理解和解题技巧。希望对大家的学习有所帮助！',
				tags: ['高等数学', '学习笔记', '考研数学'],
				likes: 128,
				comments: 32,
				shares: 16,
				isLiked: false,
				commentList: [
					{
						userName: '考研学长',
						userAvatar: '/static/avatars/user4.png',
						time: '1小时前',
						content: '这些笔记整理得很清晰，对我复习很有帮助！',
						likes: 8
					},
					{
						userName: '数学老师',
						userAvatar: '/static/avatars/teacher.png',
						time: '30分钟前',
						content: '解题思路很清晰，建议同学们收藏学习。',
						likes: 12
					}
				]
			}
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		toggleFollow() {
			this.content.isFollowing = !this.content.isFollowing;
			uni.showToast({
				title: this.content.isFollowing ? '已关注' : '已取消关注',
				icon: 'none'
			});
		},
		toggleLike() {
			this.content.isLiked = !this.content.isLiked;
			this.content.likes += this.content.isLiked ? 1 : -1;
		},
		likeComment(comment) {
			comment.likes++;
			uni.showToast({
				title: '点赞成功',
				icon: 'none'
			});
		},
		replyComment(comment) {
			this.commentText = `@${comment.userName} `;
		},
		submitComment() {
			if (!this.commentText.trim()) return;
			
			// 添加新评论
			this.content.commentList.unshift({
				userName: '我',
				userAvatar: '/static/avatars/current-user.png',
				time: '刚刚',
				content: this.commentText,
				likes: 0
			});
			
			this.content.comments++;
			this.commentText = '';
			
			uni.showToast({
				title: '评论成功',
				icon: 'none'
			});
		},
		focusComment() {
			// 聚焦到评论输入框
			this.$nextTick(() => {
				uni.showKeyboard({
					complete: () => {
						this.commentText = '';
					}
				});
			});
		},
		showShare() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		},
		showMore() {
			uni.showToast({
				title: '更多功能开发中',
				icon: 'none'
			});
		},
		showLikes() {
			uni.showToast({
				title: '点赞列表开发中',
				icon: 'none'
			});
		},
		showComments() {
			uni.showToast({
				title: '评论列表开发中',
				icon: 'none'
			});
		},
		showShares() {
			uni.showToast({
				title: '分享列表开发中',
				icon: 'none'
			});
		}
	},
	onLoad(options) {
		// 根据id获取内容详情
		const contentId = options.id;
		// TODO: 这里应该调用接口获取实际数据
		// 目前使用模拟数据
		console.log('加载内容ID:', contentId);
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.ios-top-nav {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 0.5px solid rgba(60, 60, 67, 0.1);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	
	.status-bar {
		height: var(--status-bar-height, 20px);
	}
	
	.nav-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		min-height: 44px;
	}
	
	.back-btn {
		width: 32px;
		height: 32px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.03);
		
		image {
			width: 20px;
			height: 20px;
		}
		
		&:active {
			background-color: rgba(0, 0, 0, 0.05);
		}
	}
	
	.nav-actions {
		display: flex;
		
		.action-btn {
			width: 32px;
			height: 32px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 8px;
			background-color: rgba(0, 0, 0, 0.03);
			
			image {
				width: 20px;
				height: 20px;
			}
			
			&:active {
				background-color: rgba(0, 0, 0, 0.05);
			}
		}
	}
}

/* 主要内容区域 */
.main-content {
	flex: 1;
	padding-top: calc(var(--status-bar-height, 20px) + 54px);
	padding-bottom: 60px;
	
	/* 图片轮播 */
	.image-swiper {
		width: 100%;
		height: 400px;
		
		.content-image {
			width: 100%;
			height: 100%;
		}
	}
	
	/* 内容区域 */
	.content-section {
		padding: 16px;
		
		/* 用户信息 */
		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 16px;
			
			.user-avatar {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin-right: 12px;
			}
			
			.user-details {
				flex: 1;
				
				.user-name {
					font-size: 16px;
					font-weight: 500;
					color: #333;
					margin-bottom: 4px;
				}
				
				.post-time {
					font-size: 12px;
					color: #999;
				}
			}
			
			.follow-btn {
				padding: 6px 16px;
				border-radius: 16px;
				font-size: 14px;
				color: #007AFF;
				background-color: rgba(0, 122, 255, 0.1);
				
				&.following {
					color: #999;
					background-color: #F5F5F5;
				}
				
				&:active {
					opacity: 0.8;
				}
			}
		}
		
		/* 内容描述 */
		.content-description {
			margin-bottom: 16px;
			
			.description-text {
				font-size: 15px;
				line-height: 1.6;
				color: #333;
				margin-bottom: 12px;
			}
			
			.tags {
				display: flex;
				flex-wrap: wrap;
				
				.tag {
					font-size: 14px;
					color: #007AFF;
					margin-right: 8px;
					margin-bottom: 8px;
				}
			}
		}
		
		/* 互动数据 */
		.interaction-stats {
			display: flex;
			padding: 12px 0;
			border-top: 1px solid #F5F5F5;
			border-bottom: 1px solid #F5F5F5;
			margin-bottom: 16px;
			
			.stat-item {
				display: flex;
				align-items: center;
				margin-right: 24px;
				
				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
				
				text {
					font-size: 14px;
					color: #666;
				}
			}
		}
		
		/* 评论区域 */
		.comments-section {
			.section-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				margin-bottom: 16px;
			}
			
			.comment-item {
				display: flex;
				margin-bottom: 16px;
				
				.comment-avatar {
					width: 32px;
					height: 32px;
					border-radius: 16px;
					margin-right: 12px;
				}
				
				.comment-content {
					flex: 1;
					
					.comment-header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 4px;
						
						.comment-name {
							font-size: 14px;
							font-weight: 500;
							color: #333;
						}
						
						.comment-time {
							font-size: 12px;
							color: #999;
						}
					}
					
					.comment-text {
						font-size: 14px;
						line-height: 1.5;
						color: #333;
						margin-bottom: 8px;
					}
					
					.comment-actions {
						display: flex;
						
						.action-btn {
							display: flex;
							align-items: center;
							margin-right: 16px;
							
							image {
								width: 14px;
								height: 14px;
								margin-right: 4px;
							}
							
							text {
								font-size: 12px;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
}

/* 底部操作栏 */
.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	border-top: 1px solid #F5F5F5;
	padding: 8px 16px;
	display: flex;
	align-items: center;
	
	.input-box {
		flex: 1;
		height: 36px;
		background-color: #F5F5F5;
		border-radius: 18px;
		display: flex;
		align-items: center;
		padding: 0 12px;
		margin-right: 12px;
		
		.emoji-btn {
			width: 20px;
			height: 20px;
			margin-right: 8px;
		}
		
		.comment-input {
			flex: 1;
			height: 36px;
			line-height: 36px;
			font-size: 14px;
			color: #333;
			padding: 0;
			margin: 0;
			background: transparent;
			
			&::placeholder {
				color: rgba(51, 51, 51, 0.35);
				line-height: 36px;
			}
		}
		
		.send-btn {
			font-size: 14px;
			color: #999;
			padding: 0 4px;
			
			&.active {
				color: #007AFF;
			}
		}
	}
	
	.action-buttons {
		display: flex;
		
		.action-btn {
			display: flex;
			align-items: center;
			margin-left: 16px;
			
			image {
				width: 20px;
				height: 20px;
				margin-right: 4px;
			}
			
			text {
				font-size: 14px;
				color: #666;
			}
			
			&.active {
				image {
					filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(210deg) brightness(97%) contrast(101%);
				}
				
				text {
					color: #007AFF;
				}
			}
		}
	}
}
</style> 